<template>
	<section>
		<full-screen-dialog title="选择对账数据" v-model="visible" :width="1400" destroy-on-close @closed="$emit('closed')">
			<el-foot>
				<vab-query-form-top-panel>
					<el-form inline label-width="49px" style="margin-top: 5px">
						<el-form-item label="对账日期" label-width="100px">
							<el-date-picker style="width: 300px" v-model="queryList.applyDate" type="datetimerange"
								value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" range-separator="-"
								unlink-panels="true" start-placeholder="开始时间" end-placeholder="结束时间" :default-time="defaultTime"/>
							</el-form-item>
						<!-- <el-form-item label="客户名称" label-width="100px">
							<el-input placeholder="---请输入客户名称---" v-model="queryList.storeName" style="width: 300px" />
						</el-form-item>
						<el-form-item label="对账状态" label-width="100px">
							<el-input disabled placeholder="---未对账---" style="width: 300px" />
						</el-form-item> -->
						<!-- <el-form-item label="对账状态" label-width="100px">
                        <el-select placeholder="---请选择对账状态---" v-model="queryList.reconciliationStatus" style="width: 300px" >
                            <el-option label="---请选择对账状态---" value />
                            <el-option v-for="item in optionsState" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                        </el-form-item>-->
						<el-form-item label="单据编码" label-width="100px">
							<el-input placeholder="---请输入单据编码---" v-model="queryList.orderCode" style="width: 300px" />
						</el-form-item>
						<el-form-item label="关联订单" label-width="100px">
							<el-input placeholder="---请输入关联订单---" v-model="queryList.applyOrderCode"
								style="width: 300px" />
						</el-form-item>
						<el-form-item label="物料简码" label-width="100px">
							<el-input placeholder="---请输入物料简码---" v-model="queryList.materialSimpCode"
								style="width: 300px" />
						</el-form-item>
						<el-form-item label="物料编码" label-width="100px">
							<el-input placeholder="---请输入物料编码---" v-model="queryList.materialCode"
								style="width: 300px" />
						</el-form-item>
						<el-form-item label="物料分类" label-width="100px">
							<el-tree-select v-model="queryList.materialTypeIds" placeholder="---请选择物料分类---"
								:props="{ label: 'label', value: 'value', children: 'children' }"
								:data="materialTypeTree" multiple :render-after-expand="false" show-checkbox
								style="width: 300px" />
						</el-form-item>
						<el-form-item label="物料名称" label-width="100px">
							<el-input placeholder="---请输入物料名称---" v-model="queryList.materialName"
								style="width: 300px" />
						</el-form-item>
						<el-form-item label="规格型号" label-width="100px">
							<el-input placeholder="---请输入规格型号---" v-model="queryList.materialSpecs"
								style="width: 300px" />
						</el-form-item>
						<el-form-item label label-width="100px">
							<el-button :icon="Search"   type="primary"
								@click="searchData">查询</el-button>
							<el-button :icon="Search" type="info" plain @click="resetSearch">重置</el-button>
						</el-form-item>
					</el-form>
				</vab-query-form-top-panel>
			</el-foot>

			<el-main class="nopadding">
				<scTable 
					ref="mytable1" 
					:queryType="'receiving-order/accountlist'"
					:data="entityObj.items"
					:queryList="queryList"
					:totalCount="total"
					:pageSize="pageSize"
					show-summary 
					:border="true"
					@selection-change="selectionChange"  
					:row-class-name="setRowClass"
					 style="width: 100%" :row-key="getRowKeys"
					 >
					<el-table-column :reserve-selection="true" type="selection" width="50"></el-table-column>
					<el-table-column label="序号" type="index" width="55"></el-table-column>
					<el-table-column label="业务日期" prop="applyDate" width="165">
                        <template #default="scope">
							<span>{{ scope.row.applyDate.slice(0,10) }}</span>
						</template>
					</el-table-column>
					<el-table-column label="物料名称" prop="materialName" width="150"></el-table-column>
					<el-table-column label="规格型号" prop="materialSpecs" width="100"></el-table-column>
					<el-table-column label="结算数量" prop="qty" width="150"></el-table-column>
					<el-table-column label="单位" prop="unitName" width="55"></el-table-column>
					<el-table-column label="结算单价" prop="price" width="90"></el-table-column>
					<el-table-column label="金额" prop="totalAmount" width="60"></el-table-column>
					<el-table-column label="单据编码" prop="orderCode" width="250"></el-table-column>
					<el-table-column label="关联订单" prop="applyOrderCode" width="150">
						<template #default="scope">
							{{scope.row.receivingOrderType=='0'?scope.row.applyOrderCode:''}}
							{{scope.row.receivingOrderType=='1'?scope.row.afterOrderCode:''}}
							{{scope.row.receivingOrderType=='2'?scope.row.recoveryCode:''}}
							{{scope.row.receivingOrderType=='3'?scope.row.giveOrderCode:''}}
						</template>

					</el-table-column>
					<el-table-column label="制单人" prop="documentsUser" width="150"></el-table-column>
					<el-table-column label="客户" prop="storeName" width="250"></el-table-column>
					<el-table-column label="类型" width="150">
						<template #default="scope">
							{{scope.row.receivingOrderType=='0'?'要货订单':''}}
							{{scope.row.receivingOrderType=='1'?'退货订单':''}}
							{{scope.row.receivingOrderType=='2'?'空瓶订单':''}}
							{{scope.row.receivingOrderType=='3'?'赠送订单':''}}
						</template>
					</el-table-column>
					<!-- 	<el-table-column label="业务员" prop="salesman" width="150"></el-table-column> -->
					
					<el-table-column label="物料编码" prop="materialCode" width="150"></el-table-column>
					<el-table-column label="对账状态" prop="reconciliationStatusName" width="150">
						<template #default="scope">
							{{scope.row.reconciliationStatus=='1'?'已对账':''}}
							{{scope.row.reconciliationStatus=='2'?'未对账':''}}
							{{scope.row.reconciliationStatus=='3'?'对账中':''}}
							{{scope.row.reconciliationStatus=='4'?'已发送申请':''}}
						</template>
					</el-table-column>
				</scTable>
				<!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="queryList.PageIndex" :page-sizes="[10]" :page-size="queryList.PageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination> -->
			</el-main>

			<template #footer>
				<div style="text-align: center;">
					<el-button @click="visible = false">关 闭</el-button>
					<el-button type="primary" @click="submit()">确认添加</el-button>
				</div>
			</template>
		</full-screen-dialog>
	</section>
</template>

<script>
	import tool from "@/utils/tool";
	export default {
		emits: ["checkTable"],
		data() {
			return {
				firstIndex: 0,
				optionsState: [{
						value: 1,
						label: "已对账",
					},
					{
						value: 2,
						label: "未对账",
					},
					{
						value: 3,
						label: "对账中",
					},
					{
						value: 4,
						label: "已发送申请",
					},
				],
				materialTypeTree: [],
				selectedRows: [],
				visible: false,
				// orgType: "", // this.orgType = tool.data.get("USER_INFO").AccountType;
				columnList: [],
				bigDataCopy: [],
				total: 0,
				pageSize:10,
				queryList: {
					//"reconciliationStatus": "2",
					"materialTypeIds": [] // 默认无
				},
				entityObj: {
					items: []
				},
				selectionRows: [],
				showCondition: false,
				columnIndex0: "",
				columnIndex17: "",
				columnIndex15: "",
				dialogPrint: false,
				dialogCheck: false,
				dialogReconciliatio: false,
				storeId: '',
				storeOrgType:2,
				accountDate: [],
				defaultTime: [
					new Date(2000, 1, 1, 0, 0, 0),
					new Date(2000, 2, 1, 23, 59, 59),
				],
			};
		},
		methods: {
			getRowKeys(row) {
				return row.receivingOrderId;
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.searchData()
			},
			handleCurrentChange(val) {
				this.queryList.PageIndex = val
				console.log(`当前页: ${val}`);
				this.searchData()
			},
			initData(bigData, storeId, accountDate,storeOrgType=2) {
				console.log('bigData',bigData)
				this.visible = true;
				this.storeId = storeId; 
				this.storeOrgType=storeOrgType;
				console.log('accountDate',accountDate)
				if(accountDate){
					var newdate = new Date(accountDate[1]);
					var newyear= newdate.getFullYear() - 1;
				}
				//this.accountDate = [newyear+'-'+(newdate.getMonth()+1<10?'0'+(newdate.getMonth()+1):(newdate.getMonth()+1))+'-'+(newdate.getDate()<10?'0'+newdate.getDate():newdate.getDate()),accountDate[1]];
				this.queryList.storeId = storeId;
				this.queryList.storeOrgType=storeOrgType;
				this.queryList.applyDate = accountDate;
				this.queryList.isSalesAccount = 0;
				this.queryList.notReceivingOrderIds=bigData.map(p=>p.receivingOrderId);
				this.bigDataCopy = bigData

				this.initTree()
				this.searchData()
			},
			// 初始化 1列表数据 2默认打勾选中的 3物料分类字典
			async searchData() {
				this.selectedRows = [];
				try {
					const {
						response,
						status
					} = await this.$API.auth.PostProcessApi.post("receiving-order/accountlist", {...this.queryList});
					if (status == 200) {
						console.log("response",response);
						this.entityObj.items = response.data
						this.total=response.dataCount
						this.pageSize=response.pageSize
						
						// this.$nextTick(() => {
						// 	const index = this.bigDataCopy.reduce((acc, item) => {
						// 		acc[item.receivingOrderId] = item;
						// 		return acc;
						// 	}, {});
						// 	this.entityObj.items.forEach(element => {
						// 		if (index.hasOwnProperty(element.receivingOrderId)) {
						// 			this.$refs.mytable.toggleRowSelection(element, true);
						// 		}
						// 	});
						// })
					}
				} catch (error) {}
			},
			// 获取字典数据
			async initTree() {
				try {
					const returnValue = await this.$API.auth.PostProcessApi.post("material-type/tree", {
						status: 1
					});
					if (returnValue.status == 200) {
						this.materialTypeTree = returnValue.response;
					} else {
						this.$message.error("操作失败:" + returnValue.msg);
					}
				} catch (error) {}

			},
			submit() {
				console.log('this.selectionRows', this.selectionRows)
				this.$emit("checkTable", this.selectionRows);
				this.bigDataCopy = []
				this.visible = false;
			},
			checkSelect() {
				let list = [];
				list.forEach((row) => {
					this.$refs.mytable.toggleRowSelection(row, true);
				});
			},
			
			setRowClass({ row }) {
            if (this.selectionRows.includes(row)) {
                return "selected-row-color";
            }
            return "";
    },
			//表格选择后回调事件
			selectionChange(selection) {
				this.selectionRows = selection;
				console.log(this.selectionRows);
			},
			resetSearch() {
				this.queryList = {
					"reconciliationStatus": "2",
					"PageIndex": 1,
					"PageSize": 10,
					storeId: this.storeId,
					applyDate: this.accountDate,
					isSalesAccount:0,
				};
				this.searchData();
			},
			objectSpanMethod({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				// 用于标志合并列的第一行

				// 初始化firstIndex
				if (rowIndex == 0 && columnIndex == 0) {
					this.firstIndex = 0;
				}

				// 当前行占用行数
				const zyRow = row.receivingOrderItems.length;

				// 对于合并列 如果当前行索引==firstIndex
				if (columnIndex == 0 || columnIndex == 17) {
					// 合并列的第一行 占用行数=zyRow 列数=1
					if (rowIndex == this.firstIndex) {
						// 计算合并列的第一行 计算时机为处理到合并列第一行的最后一列
						if (rowIndex == this.firstIndex && columnIndex == 17) {
							this.firstIndex = this.firstIndex + zyRow;
						}
						return {
							rowspan: zyRow,
							colspan: 1
						};
					}
					// 合并列的剩余行，不占用行数和列数
					else {
						return {
							rowspan: 0,
							colspan: 0
						};
					}
				}
				// 非合并列 都占用一行一列
				else {
					// 计算合并列的第一行 计算时机为处理到合并列第一行的最后一列
					if (rowIndex == this.firstIndex && columnIndex == 17) {
						this.firstIndex = this.firstIndex + zyRow;
					}
					return {
						rowspan: 1,
						colspan: 1
					};
				}
			}
		},
		async mounted() {
    		
  		},
	};
</script>

<style lang="scss" scoped>
/* 当表格行处于悬停状态时改变背景颜色 */
::v-deep .el-table .el-table__row:hover {
    background-color: #dae8f7;
}
::v-deep .el-table__body .el-table__row--striped.hover-row td {
    background-color: #dae8f7 !important;
}
//   斑马纹选中颜色
::v-deep .el-table__body .el-table__row--striped.selected-row-color td {
    background-color: #b8dcff !important;
}
::v-deep .el-table {
    --el-table-row-hover-bg-color: #dae8f7;
}

::v-deep .el-table tr:nth-child(2n) {
    background: #f2f2f2;
}
</style>
<style>
.el-table .selected-row-color {
    background-color: #b8dcff !important;
}
.el-table--enable-row-hover .el-table__body tr.selected-row-color:hover > td {
    background-color: #b8dcff !important;
}
.el-table__body-wrapper .el-table__body tr.selected-row-color.hover-row > td {
    background-color: #b8dcff !important;
}
.el-table__fixed-body-wrapper
    .el-table__body
    tr.selected-row-color.hover-row
    > td {
    background-color: #b8dcff !important;
}
.el-table__body-wrapper
    .el-table__body
    tr.selected-row-color.hover-row
    > .el-table__row--striped {
    background-color: #b8dcff !important;
}
</style>




